<template>
    <view class="container" :style="themeColor">
        <view class="header">
            <view class="left">
                <text>当前剩余</text>
                <text v-show="balance">{{ balance }}</text>
            </view>
            <view class="right">
                <text>交易笔数(笔)</text>
                <text>{{ total }}</text>
            </view>
        </view>
        <view class="main">
            <tab-bar :tabs="tabs" @clickTab="clickTab" :tabIndex="tabIndex" @timeFn="timeFn"></tab-bar>
            <view class="product-main-list" v-if="!isloadding" :style="{ height: listHeight }">
                <mescroll-uni @init="mescrollInit" :down="downOption" :height="listHeight" @down="refresh"
                    :up="upOption" @up="getData">
                    <!-- 数据列表 -->
                    <detail-item v-for="(item, index) in datas" :key="index" :data="item"></detail-item>
                </mescroll-uni>
            </view>
        </view>
    </view>
</template>

<script>
import { GetWholeSaleMoneyList, GetUerBalanceByMoneyType } from "@/service/api/member.js"
import { getElementHeight } from "@/uni-sub-base/utils/elementUtil.js"
import detailItem from "@/pages_me/components/finance/detail-item.vue"
import tabBar from "@/pages_me/components/finance/tab-bar.vue"
export default {
    components: {
        tabBar,
        detailItem,
    },
    data() {
        return {
            tabs: [
                {
                    title: "全部",
                    state: -1,
                },
                {
                    title: "收入",
                    incomeOrExpenditure: 1,
                },
                {
                    title: "已到账",
                    state: 1,
                },
                {
                    title: "未到账",
                    state: 0,
                },
                {
                    title: "支出",
                    incomeOrExpenditure: 2,
                },
            ],
            downOption: {
                auto: false,
            },
            upOption: {
                page: {
                    num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
                    size: 10, // 每页数据的数量
                    time: null, // 加载第一页数据服务器返回的时间; 防止用户翻页时,后台新增了数据从而导致下一页数据重复;
                },
                textLoading: "加载中 ...", // 加载中的提示文本
                textNoMore: "-- 没有更多了 --", // 没有更多数据的提示文本
                empty: {
                    icon: "/static/img/empty.png", // 图标路径 (建议放入static目录, 如 /static/img/mescroll-empty.png )
                    tip: "~ 暂无数据 ~", // 空提示
                },
                toTop: {
                    src: false,
                },
            },
            isloadding: false,
            datas: [],
            tabIndex: 0, // 当前tab的下标
            requestData: {
                moneyType: 0,
                state: "",
                incomeOrExpenditure: -1,
                pageIndex: 1,
                pageSize: 10,
                startTime: "",
                endTime: "",
            },
            listHeight: 0,
            total: 0,
            balance: "",
        }
    },
    onLoad(e) {
        if (e.name) {
            uni.setNavigationBarTitle({
                title: e.name + '明细'
            })
        }
        this.getbalance()
    },
    mounted() {
        this.getListHeight()
        //#ifndef MP
        this.refresh()
        //#endif
    },
    methods: {
        getData(page) {
            let param = this.requestData
            param.pageSize = page.size
            param.pageIndex = page.num
            GetWholeSaleMoneyList(param).then((res) => {
                this.total = res.RecordAmout
                this.mescroll.endBySize(res.Data.length, res.RecordAmout)
                this.datas = this.datas.concat(res.Data)
            })
        },
        getbalance() {
            let path = "?type=0"
            GetUerBalanceByMoneyType(path).then((res) => {
                this.balance = res.Data
            })
        },
        getListHeight(element) {
            getElementHeight(this, ".product-main-list", (e) => {
                //再获取列表高度
                this.listHeight = e + "px"
            })
        },
        isEmpty(str) {
            if (str === "" || str == null || str === undefined) {
                return true;
            }
            if (str instanceof Array) {
                if (str == null || str.length <= 0) {
                    return true;
                }
            } else if (str instanceof Date) {
                return false;
            } else if (str instanceof Object) {
                return Object.keys(str).length == 0;
            }
            return false;
        },
        //标签切换
        clickTab(index) {
            if (this.tabs[index].incomeOrExpenditure) {
                console.log('incomeOrExpenditure')
                this.requestData.state = ""
                this.requestData.incomeOrExpenditure = this.tabs[index].incomeOrExpenditure
            }
            console.log(this.tabs[index].state)
            console.log(this.isEmpty(this.tabs[index].state))
            if (!this.isEmpty(this.tabs[index].state)) {
                console.log(this.tabs[index].state)
                this.requestData.incomeOrExpenditure = -1
                this.requestData.state = this.tabs[index].state
            }
            if (this.tabIndex != index) {
                this.tabIndex = index
            }
            this.refresh()
        },
        //时间选择
        timeFn(start, end) {
            this.requestData.startTime = start
            this.requestData.endTime = end
            this.refresh()
        },
        refresh(requestData) {
            this.datas = []
            this.mescroll.resetUpScroll()
        },
    },
}
</script>

<style lang="scss">
.container {}

.header {
    height: 200rpx;
    background: $app-color-main;
    padding: $app-page-padding;
    display: flex;
    flex-direction: row;

    text {
        color: $color-white;
        font-size: $font-size-36;
        margin-bottom: 20rpx;
    }

    .left {
        display: flex;
        flex: 1;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .right {
        display: flex;
        flex: 1;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
}

.main {
    padding: $app-page-padding;
    background: $uni-bg-color-grey;
    border-radius: 40rpx 40rpx 0 0;
    margin-top: -40rpx;
}
</style>
